﻿<template>
	<div class="goods">
	  <div class="menu-wrapper" ref="menuWrapper">
	  	<ul>
	  		<li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
	  			<span class="text border-1px">
	  				<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
	  			</span>
	  		</li>
	  	</ul>
	  </div>
	  <div class="foods-wrapper"  ref="foodsWrapper">
	  	<ul>
	  		<li v-for="item in goods" class="food-list food-list-hook">
	  			<h1 class="title">{{item.name}}</h1>
	  			<ul>
	  				<li v-for="food in item.foods" class="food-item border-1px">
	  					<div class="icon"><img :src="food.icon"></div>
	  					<div class="content">
	  						<h2 class="name">{{food.name}}</h2>
	  						<p class="desc">{{food.description}}</p>
	  						<div class="extra">
	  							<span class="count">月售{{food.sellCount}}份</span>
	  							<span>好评{{food.rating}}%</span>
	  						</div>
	  						<div class="price">
	  							<span class="new">￥{{food.price}}份</span>
	  							<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
	  						</div>
	  					</div>
	  				</li>
	  			</ul>
	  		</li>
	  	</ul>
	  </div>
	  <shopcart></shopcart>
	</div>
</template>

<script>
  import BScroll from 'better-scroll';
  import shopcart from 'components/shopcart/shopcart';

  const ERR_OK = 0;

  export default{
  	props:{
  		seller:{
  			type: Object
  		}
  	},
  	data(){
  		return{
  			goods:[],
			listHeight:[],
			scrollY:0
  		}
  	},
  	computed:{
  		currentIndex(){
  			for (let i = 0; i < this.listHeight.length; i++) {
  			 	let height1 = this.listHeight[i];
  			 	let height2 = this.listHeight[i+1];
  			 	if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
  			 		return i;
  			 	}
  			}
  			return 0;
  		}
  	},
  	created(){
  	    this.$http.get('/api/goods').then((response) => {
	        response = response.body;
	        if (response.errno === ERR_OK) {
	          this.goods = response.data;
			  this.$nextTick(()=>{
			  	this._initScroll();
			  	this._calculateHeight();
			  })
	        }
	    });
        this.classMap = ['decrease','discount','special','invoice','guarantee'];
  	},
	methods:{
		selectMenu(index,event){
			if (!event._constructed) {	
				return;
			}
			let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
			let el = foodList[index];
			this.foodsScroll.scrollToElement(el,300);
		},
		_initScroll(){
			this.menuScroll = new BScroll(this.$refs.menuWrapper,{
				click:true
			});
			this.foodsScroll = new BScroll(this.$refs.foodsWrapper,{
				probeType: 3  //探针的效果 检测实时滚动的效果
			});

			this.foodsScroll.on('scroll',(pos)=>{
				this.scrollY = Math.abs(Math.round(pos.y));
			})
		},
		_calculateHeight(){
			let foodList = this.$refs.foodsWrapper.getElementsByClassName('food-list-hook');
			let height = 0;
			this.listHeight.push(height);
			for(let i=0;i<foodList.length;i++){
				let item = foodList[i];
				height += item.clientHeight;
				this.listHeight.push(height);
			}
		}
	},
	components:{
		shopcart
	}
  };
</script>

<style>
.goods{display: flex;position: absolute;top: 174px;bottom: 46px;width: 100%;overflow: hidden;}
.goods .menu-wrapper{flex: 0 0 80px;width: 80px;background-color: #f3f5f7;}
.goods .menu-wrapper .menu-item{display: table;height: 54px;width: 56px;line-height: 14px;margin: 0 auto;padding: 0 12px;}
.goods .menu-wrapper .current{position: relative;z-index: 10;margin-top: -1px;background: #fff;font-weight: 700;}
.current .text{border: none;}
.goods .menu-wrapper .menu-item .icon{width: 12px;height: 12px;vertical-align: top;margin-right: 2px;display: inline-block;background-size: 100% 100%;}
.decrease{background-image: url(decrease_3@2x.png);}
.discount{background-image: url(discount_3@2x.png);}
.guarantee{background-image: url(guarantee_3@2x.png);}
.invoice{background-image: url(invoice_3@2x.png);}
.special{background-image: url(special_3@2x.png);}
.goods .menu-wrapper .menu-item .text{display: table-cell;width: 56px;vertical-align: middle;font-size: 12px}
.goods .foods-wrapper{flex: 1;}
.goods .foods-wrapper .title{padding-left: 14px;height: 26px;line-height: 26px;border-left: 2px solid #d9dde1;font-size: 12px;color: rgb(147,153.159);background-color: #f3f5f7}
.goods .foods-wrapper .food-item{
	display: flex;
	margin: 18px;
	padding-bottom: 18px;
}
.goods .foods-wrapper .food-item:last-child{border: 0;margin-bottom: 0;}
.goods .foods-wrapper .icon{flex: 0 0 57px;margin-right: 10px; }
.goods .foods-wrapper .icon img{width: 100%;}
.goods .foods-wrapper .content .name{margin: 2px 0 8px;height: 14px;line-height: 14px;font-size: 14px;color: rgb(7,17,27)}
.goods .foods-wrapper .content .desc,.goods .foods-wrapper .content .extra{margin-bottom: 8px;line-height: 12px;font-size: 10px;color: rgb(147,153,159)}
.goods .foods-wrapper .content .desc{margin-bottom: 8px;}
.goods .foods-wrapper .content .extra .count{margin-right: 12px;}
.goods .foods-wrapper .content .price{font-weight: 700;line-height: 24px;}
.price .new{margin-right: 8px;font-size: 14px;color: rgb(240,20,20)}
.price .old{text-decoration: line-through;font-size: 10;color: rgb(147,153,159)}
</style>
